<template>
  <div class="page_foo">
    <div class="home_page_warp2">
      <div class="home_page_title">{{ typeTitle }}</div>
      <div class="home_page_index_type">
        <span
          v-for="itemType of typeList"
          :key="itemType.id"
          class="home_page_type_name"
          :class="{typeActive: defaultTypeIndex === itemType.id}"
          @click="changeType(itemType.id)"
        >{{ itemType.name }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PageTitleCom',
  components: {},
  props: {
    typeList: {
      type: Array,
      default: () => [],
    },
    typeTitle: {
      type: String,
      default: '报告分类',
    },
  },
  data() {
    return {
      defaultTypeIndex: 0,
    }
  },
  computed: {},
  create() {
  },
  mounted() {
  },
  methods: {
    changeType(id) {
      this.defaultTypeIndex = id
      this.$emit('changeType', id)
    },
  },
}
</script>

<style scoped lang="scss">
  @import "../assets/style/base";
  .home_page_warp2{
    .home_page_title{
      padding: pxTorem(15px) pxTorem(0px) pxTorem(15px) pxTorem(40px);
      font-size: pxTorem(36px);
      font-weight: bold;
      position: relative;
    }
    .home_page_title:after{
      content: '';
      position: absolute;
      left: pxTorem(20px);
      top: pxTorem(23px);
      width: pxTorem(8px);
      height: pxTorem(30px);
      background-color: #1296db;
    }
    .home_page_index_type{
      display: flex;
      padding: 0 pxTorem(30px);
      margin-bottom: pxTorem(20px);
      .home_page_type_name{
        padding: pxTorem(10px) pxTorem(24px);
        font-size: pxTorem(32px);
        border-radius: pxTorem(60px);
        background-color: #f0f0f0;
        margin-right: pxTorem(30px);
      }
      .typeActive{
        background-color: #1296db;
        color: #ffffff;
      }
    }
  }
</style>
